var box = $('box')
var mainDiv = $('main')
var right = $('right')
var up = $('up')
var down = $('down')
var upRight = $('up-right')
var downRight = $('right-down')
var downLeft = $('left-down')
var upLeft = $('up-left')
var left = $('left')

var img0 = $('img1')
var img = $('img2')
var imgPre = $('img3');

// 是否被拖拽
var isDraging = false
// 被鼠标点击的是哪个点
var contact = ""

right.onmousedown = (e) => status(e,'right')
up.onmousedown = (e) => status(e,'up')
down.onmousedown = (e) => status(e,'down')
upRight.onmousedown = (e) => status(e,'up-right')
downRight.onmousedown = (e) => status(e,'down-right')
downLeft.onmousedown = (e) => status(e,'down-left')
upLeft.onmousedown = (e) => status(e,'up-left')
left.onmousedown = (e) => status(e,'left')

window.onmousemove = function(e){
  var e = e||window.event;
  if(isDraging === true){
     switch (contact) {
         case "up" : upMove(e);break;
         case "right" : rightMove(e);break;
         case "down" : downMove(e);break;
         case "left" : leftMove(e);break;
         case "up-right" : upMove(e);rightMove(e);break;
         case "down-right" : downMove(e);rightMove(e);break;
         case "down-left" : downMove(e);leftMove(e);break;
         case "up-left" : upMove(e);leftMove(e);break;
         default:break
     }
  }
}

window.onmouseup = function () {
  isDraging = false
}


// 选取图片区域明亮显示
function setChoice(img) {
  var top = mainDiv.offsetTop
  var right = mainDiv.offsetLeft + mainDiv.offsetWidth
  var bottom = mainDiv.offsetTop + mainDiv.offsetHeight
  var left = mainDiv.offsetLeft
  img.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
}
function status(e,dire) {
  e.stopPropagation()
  isDraging = true
  contact = dire
  console.log(contact)
}

// 禁止图片拖动
img.ondragstart = imgdragstart;
img0.ondragstart = imgdragstart
function imgdragstart() {
    return false;
};


//获取id的函数
function $(id){
return document.getElementById(id);
}

//获取元素相对于屏幕左边及上边的距离，利用offsetLeft
function getPosition(el){
  var left = el.offsetLeft;
  var top = el.offsetTop;
  var parent = el.offsetParent;
  while(parent != null){
    left += parent.offsetLeft;
    top += parent.offsetTop;
    parent = parent.offsetParent;
  }
  return {"left":left,"top":top};
}
//up移动
function upMove(e){
  var y = e.clientY;//鼠标位置的纵坐标
  var heightBefore = mainDiv.offsetHeight - 2;//选取框变化前的高度
  var addHeight = getPosition(mainDiv).top - y;//增加的高度
  mainDiv.style.height = heightBefore + addHeight + 'px';//选取框变化后的宽度
  mainDiv.style.top = mainDiv.offsetTop - addHeight + 'px';//相当于变化后左上角的纵坐标，鼠标向上移纵坐标减小，下移增大
  setChoice(img)
  setPreview(imgPre)
}
//right移动
function rightMove(e){
  var x = e.clientX;//鼠标位置的横坐标
  var widthBefore = mainDiv.offsetWidth - 2;//选取框变化前的宽度
  //var widthBefore = mainDiv.clientWidth;
  var addWidth = x - getPosition(mainDiv).left - widthBefore;//鼠标移动后选取框增加的宽度
  mainDiv.style.width = widthBefore + addWidth + 'px';//选取框变化后的宽度
  setChoice(img)
  setPreview(imgPre)
}
//down移动
function downMove(e){
  var heightBefore = mainDiv.offsetHeight - 2;
  var addHeight = e.clientY - getPosition(mainDiv).top - mainDiv.offsetHeight;
  mainDiv.style.height = heightBefore + addHeight + 'px';
  setChoice(img)
  setPreview(imgPre)
}
//left移动
function leftMove(e){
  var widthBefore = mainDiv.offsetWidth - 2;
  var addWidth = getPosition(mainDiv).left - e.clientX;//增加的宽度等于距离屏幕左边的距离减去鼠标位置横坐标
  mainDiv.style.width = widthBefore + addWidth + 'px';
  mainDiv.style.left = mainDiv.offsetLeft - addWidth + 'px';//左边的距离（相当于左边位置横坐标）等于选取框距父级元素的距离减去增加的宽度
  setChoice(img)
  setPreview(imgPre)
}

//右边图片预览函数
function setPreview(img){
  var top = mainDiv.offsetTop;
  var right = mainDiv.offsetLeft + mainDiv.offsetWidth;
  var bottom = mainDiv.offsetTop + mainDiv.offsetHeight;
  var left = mainDiv.offsetLeft;
  img.style.top = -top + 'px';
  img.style.left = -left + 'px';
  img.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
}

// 拖动截图框
// 鼠标按下时的坐标
var x, y, boundTop, boundLeft
mainDiv.ondragstart = function (e) {
  x = e.offsetX
  y = e.offsetY
}
mainDiv.ondrag = function(e) {
  // 选择框的 top，left
  boundTop = e.clientY - box.offsetTop - y
  boundLeft = e.clientX - box.offsetLeft - x
  mainDiv.style.top = boundTop + 'px'
  mainDiv.style.left = boundLeft + 'px'
  // 图片显示
  var top = mainDiv.offsetTop;
  var right = mainDiv.offsetLeft + mainDiv.offsetWidth;
  var bottom = mainDiv.offsetTop + mainDiv.offsetHeight;
  var left = mainDiv.offsetLeft;
  img.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
}
mainDiv.ondragend = function (e) {
  // 选择框的 top，left
  boundTop = e.clientY - box.offsetTop - y
  boundLeft = e.clientX - box.offsetLeft - x
  mainDiv.style.top = boundTop + 'px'
  mainDiv.style.left = boundLeft + 'px'
  // 图片显示
  var top = mainDiv.offsetTop;
  var right = mainDiv.offsetLeft + mainDiv.offsetWidth;
  var bottom = mainDiv.offsetTop + mainDiv.offsetHeight;
  var left = mainDiv.offsetLeft;
  img.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
}
